<template>
	<div class="refresh-btn" :style="{ height: height, lineHeight: height }" @click="refreshBtn">
		<!-- <i class="iconfont icon-shuaxin refresh-icon" :style="{ color: color }" :class="[refresh ? 'active' : '']"></i> -->
		<i class="iconfont icon-shuaxin refresh-icon" :class="[refresh ? 'active' : '']"></i>
		<span>刷新</span>
	</div>
</template>

<script>
export default {
	name:'refreshButton',
	props: {
		height: {
			type: String,
			default: '40px'
		},
		color: {
			type: String,
			default: '#34a1e0'
		}
	},
	data() {
		return {
			refresh: false
		};
	},
	watch: {},
	mounted() {},
	beforeDestroy() {},
	methods: {
		refreshBtn() {
			this.refresh = true;
			setTimeout(() => {
				this.refresh = false;
			}, 500);
			this.$emit('refresh');
		}
	}
};
</script>

<style scoped="scoped">
.refresh-btn {
	display: flex;
	margin-left: 10px;
	font-size: 16px;
	cursor: pointer;
}
.refresh-btn .refresh-icon {
	display: block;
	font-size: 30px;
	transition: linear 0.5s;
}
.refresh-btn .active {
	transform: rotate(360deg);
}
.refresh-btn span {
	display: block;
	margin-left: 5px;
}
</style>
